<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
    <div class="row">
     <div class="col-md-offset-2 col-md-3">
         <h1>图书管理系统</h1>
     </div>
    </div>
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div id="app">
                    <ul class="nav nav-pills navbar-default">
                        <li class="active"><a href="main.html">个人基本信息</a></li>
                        <li ><a href="book.html">图书信息查询</a></li>
                        <li><a href="borrow.html">我的借阅</a></li>
                    </ul>
            </div>
        </div>
    </div>
    <div class="row row-margin-top">
        <div class="col-md-offset-4 col-md-6">
            <h3>你好，用户 <span id="uname"></span></h3>
            <h4>借书证号：<span id="ulicense"></span></h4>
            <h4>性别：<span id="ugender"></span></h4>
            <h4>系别：<span id="udepart"></span></h4>
            <div>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#passwordModal">修改密码</button>
            </div>
        </div>
    </div>
    <div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="updateModalLabel">修改密码</h4>
                </div>
                <div class="modal-body" id="modalbody">
                    <form class="form" role="form" >
                        <div class="form-group">
                            <!-- Text input-->
                            <label  class="form-inline"for="originalPass">原始密码：
                            <input type="password" placeholder="原始密码" class="form-control" id="originalPass">
                            </label>
                        </div>

                        <div class="form-group">
                            <label class="form-inline" for="newPass">新密码：
                            <input type="password" placeholder="新密码" class="form-control" id="newPass">
                            </label>
                        </div>
                    </form>
                    <p id="submitStatus"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
  </div>
</div>
</body>

<script>
    $(document).ready(function(){
        $.get("user",{current:"true"},function(data){
            console.log(data)
            var jsondata=JSON.parse(data);
            $("#uname").html(jsondata.uname)
            $("#ulicense").html(jsondata.ulicense)
            $("#ugender").html(jsondata.ugender)
            $("#udepart").html(jsondata.udepart)
        })

        $("#query").click(function () {
            window.location.href="book.html"
        })
        $('#submitUpdate').click(function(){
            var ori=$("#originalPass").val();
            var changed=$("#newPass").val();
            $.post("user",{current:"true",operation:"changepassword",originalPass:ori,newPass:changed},function (data) {
                if(data=='OK'){
                    $('#submitStatus').html("修改成功");
                }
                else{
                    $('#submitStatus').html("修改失败");
                }
            })
        })
    })
</script>
</html>